<template>
    <view class="shop-page">
        <!-- 店铺信息 -->
        <view class="shop-info" >
            <!-- 店铺Logo和店铺名称/关注按钮在一行 -->
            <view class="info-row1">
               <image :src="shopInfo.shopLogo" class="shop-logo" alt="店铺Logo" />

                <view class="shop-header">
                    <text class="shop-name">{{ shopInfo.shopName }}</text>
                    <button class="follow-btn">关注<uni-icons type="heart-filled" size="15" color="#ff0000"></uni-icons></button>
                </view>
            </view>

            <!-- 介绍和其他信息的分行布局 -->
            <view class="shop-details">
                <text class="description">{{ shopInfo.shopDescription }}</text>
                <view class="info-row2">
                    <text class="shop-rating">评分：{{ shopInfo.shopRating }}</text>
                    <!-- 使用星星图标表示等级 -->
                    <view class="shop-level">等级：
                             <view  v-for="i in shopInfo.shopLevel" :key="i">
                               <uni-icons class="icons" type="star-filled" size="15" color="#ff9900"></uni-icons></view>
                             </view>
                    <text class="shop-status">
                        状态：{{ shopInfo.shopStatus === '0' ? '营业中' : '暂停营业' }}
                    </text>
                </view>
            </view>
        </view>
        
		<view class="sort-dropdown">
		    <text @click="openSalesDrawer">销量</text>
		    <text @click="openPriceDrawer">价格</text>
		</view>
        <!-- 商品部分 -->
        <scroll-view class="product-scroll" scroll-y="true" show-scrollbar="true">
            <view class="product-row">
                <view v-for="(item, index) in productList" :key="index" class="product-item">
                    <view @click="goToGoodsdetail(item.productId)">
                        <product class="product-card"
                            :imageUrl="getPrimaryImageUrl(item.images)"
                            :title="item.productName"
                            :price="item.price"
                            :unit="item.unit"
                            :productId="item.productId"
                        />
                    </view>
                </view>
            </view>
        </scroll-view>

		

        <!-- 底部操作栏 -->
        <view class="footer">
            <button class="footer-btn" @click="contactSupport">客服</button>
            <button class="footer-btn" @click="callPhone">打电话</button>
        </view>
		
		
		
		<!-- 销量排序抽屉 -->
		<uni-popup ref="salesPopup" type="top" background-color="white" v-model="showSalesDrawer">
		    <view class="popup-content">
		        <view v-for="(option, index) in sortOptions" :key="index" @click="onSortChange(index)" class="popup-item">
		            {{ option }}
		        </view>
		    </view>
		</uni-popup>
		
		<!-- 价格筛选抽屉 -->
		<uni-popup ref="pricePopup" type="top" background-color="white" v-model="showPriceDrawer">
		  <view class="drawer-content">
			  <view v-for="(option, index) in sortOptions" :key="index" class="price-option">
			    <view @click="onSortChange(index + 2)" >
			      {{ option }}
			    </view>
			  </view>
		    <text class="drawer-title">选择价格区间</text>
		    <view class="price-input">
		      <input type="number" v-model="priceMin" placeholder="最低价格" />
		      <text>—</text>
		      <input type="number" v-model="priceMax" placeholder="最高价格" />
		    </view>
		    <view class="drawer-actions">
		      <button @click="closePriceDrawer">关闭</button>
		      <button @click="applyPriceFilter">确认</button>
		    </view>
		  </view>
		</uni-popup>
    </view>
</template>

<script>
import { getShopDetail, getShopProducts } from '../../../api/shop/index.js';


export default {
    
    data() {
        return {
			userId:null,
            shopInfo: {}, 
            productList: [],
            sortOptions: ['取消', '从高到低', '从低到高'],
            priceMin: null,
            priceMax: null,
            selectedSortIndex: 0
        };
    },
    onLoad(options) {
        this.userId = options.userId;
        if (this.userId) {
            this.getShopInfo(this.userId);
        } 
    },
    methods: {
        async getShopInfo(userId) {
            try {
                const data = await getShopDetail(this.userId);
                this.shopInfo = data;
                await this.getShopProducts();
            } catch (error) {
                console.error("获取店铺信息失败:", error);
            }
        },
        async getShopProducts() {
            if (this.shopInfo && this.shopInfo.shopId) {
                try {
                    const data = await getShopProducts(this.shopInfo.shopId,this.selectedSortIndex,this.priceMin,this.priceMax);
                    this.productList = data;
                } catch (error) {
                    console.error("获取商品列表失败:", error);
                }
            }
        },
   
   getPrimaryImageUrl(images) {
      if (!images || images.length === 0) {
        // 返回默认动态图片路径
        return '/static/home/dj.jpg'; // 默认图片的 URL
      }
     
      const primaryImage = images.find(image => image.isPrimary);
      // 返回主图 URL 或第一张图片的 URL，如果都没有，则返回默认图片
      return primaryImage?.imageUrl || images[0]?.imageUrl || '/static/home/dj.jpg';
    },
        onSortChange(index) {
            this.selectedSortIndex = index;
            this.getShopProducts(); // 切换排序时，重新加载商品
        },
        // 打开销量排序抽屉
          openSalesDrawer() {
            this.$refs.salesPopup.open()
          },
        
          // 打开价格筛选抽屉
          openPriceDrawer() {
            this.$refs.pricePopup.open()
          },
          // 关闭价格筛选抽屉
          closePriceDrawer() {
            this.$refs.pricePopup.close();
          },
        
          // 应用价格筛选
          applyPriceFilter() {
        	  console.log(this.priceMin)
            this.getShopProducts(); // 应用价格筛选后重新加载商品
            this.closePriceDrawer(); // 关闭价格筛选抽屉
          },

        contactSupport() {
            uni.showToast({ title: '暂无客服', icon: 'none' });
        },
        callPhone() {
            uni.makePhoneCall({ phoneNumber: '17807745341' });
        }
    }
}
</script>


<style lang="scss">
.shop-page {
    margin: 16rpx;  // 8px -> 16rpx
    background-color: #f5f5f5;
}

.shop-info {
    border-radius: 20rpx;  // 10px -> 20rpx
    background-color: #00aa7f;
    padding: 20rpx;  // 10px -> 20rpx
    color: white;

    .info-row1 {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;  // 10px -> 20rpx

        .shop-logo {
            width: 120rpx;  // 60px -> 120rpx
            height: 120rpx;  // 60px -> 120rpx
            border-radius: 60rpx;  // 30px -> 60rpx
        }

        .shop-header {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 20rpx;  // 10px -> 20rpx

            .shop-name {
                font-size: 36rpx;  // 18px -> 36rpx
                font-weight: bold;
            }

            .follow-btn {
                margin-left: 120rpx;  // 60px -> 120rpx
                background-color: #ffaa00;
                padding: 10rpx 20rpx;  // 5px 10px -> 10rpx 20rpx
                border-radius: 10rpx;  // 5px -> 10rpx
            }
        }
    }

    .shop-details {
        font-size: 28rpx;  // 14px -> 28rpx

        .description {
            margin: 10rpx 4rpx;  // 5px 2px -> 10rpx 4rpx
        }

        .info-row2 {
            display: flex;
            justify-content: space-between;
            margin-top: 10rpx;  // 5px -> 10rpx
        }
    }
}

.shop-level {
    display: flex;
    align-items: center;
}

.footer {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;  // 10px -> 20rpx
    background-color: #fff;

    .footer-btn {
        flex: 1;
        padding: 10rpx;  // 5px -> 10rpx
        font-size: 32rpx;  // 16px -> 32rpx
        text-align: center;
        border-radius: 10rpx;  // 5px -> 10rpx
        background-color: #00aaff;
        border: 2rpx solid #32CD32;  // 1px -> 2rpx
    }
}

.sort-dropdown {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100rpx;  // 50px -> 100rpx
    background-color: #fff;
    border-bottom: 2rpx solid #eee;  // 1px -> 2rpx

    text {
        font-size: 32rpx;  // 16px -> 32rpx
        color: #333;
        cursor: pointer;
    }
}

.right-scroll {
    height: 700rpx;  // 500px -> 1000rpx
    overflow-y: auto;
}

.product-row {
    height: 920rpx;  // 460px -> 920rpx
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.product-item {
	width: 46%;
    margin-bottom: 20rpx;  // 10px -> 20rpx
}

.popup-content,
.drawer-content {
    padding: 32rpx;  // 16px -> 32rpx
}

.price-option {
    border-bottom: 2rpx solid #e0e0e0;  // 1px -> 2rpx
    padding: 24rpx 0;  // 12px 0 -> 24rpx 0
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 每一行的分割线 */
.popup-item,
.price-input,
.drawer-actions {
    border-bottom: 2rpx solid #e0e0e0;  // 1px -> 2rpx
    padding: 24rpx 0;  // 12px 0 -> 24rpx 0
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 文字加粗并居中 */
.popup-item,
.drawer-title,
.price-input text {
    font-weight: bold;
    text-align: center;
}

/* 输入框样式 */
.price-input {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10rpx 0;  // 5px 0 -> 10rpx 0
}

.price-input input {
    width: 80rpx;  // 40% -> 80% of screen width
    height: 100rpx;  // 50px -> 100rpx
    padding: 10rpx;  // 5px -> 10rpx
    border: 2rpx solid #ddd;  // 1px -> 2rpx
    border-radius: 8rpx;  // 4px -> 8rpx
    font-size: 30rpx;  // 15px -> 30rpx
    text-align: center;
}

/* 关闭与确认按钮放在同一行并居中 */
.popup-item,
.price-input,
.drawer-title,
.drawer-actions {
    border-bottom: 2rpx solid #e0e0e0;  // 1px -> 2rpx
    padding: 24rpx 0;  // 12px 0 -> 24rpx 0
    display: flex;
    align-items: center;
    justify-content: center;
}

.drawer-actions button {
    flex: 1;
    padding: 4rpx;  // 2px -> 4rpx
    margin: 0 16rpx;  // 8px -> 16rpx
    font-size: 24rpx;  // 12px -> 24rpx
    color: white;
    font-weight: bold;
    border-radius: 8rpx;  // 4px -> 8rpx
    text-align: center;
}

.drawer-actions button:first-child {
    background-color: #00aa00;  // 关闭按钮颜色
}

.drawer-actions button:last-child {
    background-color: #007aff;  // 确认按钮颜色
}

</style>
